<template>
  <div>
    <van-sticky :offset-top="1">
      <header id="header" class="aui-bar aui-bar-nav">
        <a class="aui-pull-left" @click="back">
          <span class="iconfont icon-fanhui"></span>
        </a>
        <div class="aui-title">联系商家</div>
      </header>
    </van-sticky>
    <div class="sy_detail">
      <div>
        <div id="super_product">
          <div class="good_t aui-bg-f van-hairline--bottom">
            <van-row>
              <van-col span="8">
                <div
                  class="good-img"
                  v-bind:style="{ backgroundImage: 'url(' + good.image + ')' }"
                  @click="fnPreview(good.image)"
                ></div>
              </van-col>
              <van-col span="16" class="good_cont aui-padded-l-15">
                <van-row class="name">
                  <van-col span="2">
                    <img
                      src="../../assets/tb_icon.png"
                      alt=""
                      v-if="good.downtype == 1"
                    />
                    <img
                      src="../../assets/tm_icon.png"
                      alt=""
                      v-if="good.downtype == 2"
                    />
                    <img
                      src="../../assets/jd_icon.png"
                      alt=""
                      v-if="good.downtype == 3"
                    />
                    <img
                      src="../../assets/pdd_icon.png"
                      alt=""
                      v-if="good.downtype == 4"
                    />
                    <img
                      src="../../assets/al_icon.png"
                      alt=""
                      v-if="good.downtype == 5"
                    />
                  </van-col>
                  <van-col
                    span="22"
                    class="
                      aui-text-7 aui-ftn14 aui-padded-l-5
                      van-multi-ellipsis--l2
                    "
                    v-text="good.name"
                  ></van-col>
                </van-row>
                <van-row class="item aui-text-7 aui-ftn12 aui-padded-t-5">
                  <van-col span="8">下单金额:</van-col>
                  <van-col span="16">￥{{ good.price }}</van-col>
                </van-row>
                <van-row
                  class="item aui-row aui-text-7 aui-ftn12 aui-padded-t-5"
                >
                  <van-col span="8">返还金额:</van-col>
                  <van-col span="16">￥{{ good.back_price }}</van-col>
                </van-row>
                <van-row
                  class="item aui-row aui-text-7 aui-ftn12 aui-padded-t-5"
                >
                  <van-col span="8">试用ID:</van-col>
                  <van-col span="16" v-text="good.id"></van-col>
                </van-row>
                <div
                  class="sq_btn aui-text-center aui-ftn12 aui-margin-t-10"
                  v-text="good.status"
                  v-cloak
                ></div>
              </van-col>
            </van-row>
          </div>
          <!-- 已确认收货 -->
          <div class="aui-bg-f">
            <div
              class="
                item
                aui-ftn12 aui-padded-t-10 aui-padded-b-10 aui-padded-l-15
                van-hairline--bottom
              "
            >
              <span class="aui-text-7 aui-padded-r-5">订单号:</span>
              <span
                class="aui-text-7 aui-padded-r-5"
                v-text="good.ordernum"
              ></span>
            </div>
            <div
              class="
                item
                aui-ftn12 aui-padded-t-10 aui-padded-b-10 aui-padded-l-15
              "
            >
              <span class="aui-text-7 aui-padded-r-5">商家QQ:</span>
              <span class="aui-text-7 aui-padded-r-5" v-text="good.qq"></span>
            </div>
          </div>
        </div>
        <div class="chat-list aui-padded-10 aui-bg-f aui-margin-t-10" v-if="chatList.length > 0">
          <div
            class="list aui-padded-b-10"
            v-for="(item, index) in chatList"
            :key="index"
          >
            <img :src="item.avatar" alt="" />
            <div class="list-cont aui-padded-l-10">
              <div
                class="name aui-ftn13 aui-text-3 aui-padded-b-10"
                v-text="item.nickname"
              ></div>
              <time
                class="aui-text-7 aui-ftn12 aui-padded-b-10"
                v-text="item.createtime"
              ></time>
              <div
                class="mm aui-ftn13 aui-text-3 aui-padded-b-10"
                v-if="item.content"
                v-html="item.content"
              ></div>
              <div style="max-width: 150px;" class="aui-padded-b-10">
                  <div
                v-if="item.image"
                class="good-img"
                v-lazy="item.image"
                v-bind:style="{
                  backgroundImage: 'url(' + item.image + ')',
                }"
                @click="fnPreview(item.image)"
              ></div>
              </div>
              
            </div>
          </div>
        </div>
        <div style="padding-bottom: 50px"></div>
        <div class="fixed aui-bg-f" style="bottom: 0" id="fixed">
          <div class="comment">
            <van-uploader :after-read="afterRead">
              <span class="iconfont icon-tupian aui-ftn24 aui-text-7"></span>
            </van-uploader>
            <div class="comment-input">
              <input
                type="text"
                placeholder="立即回复"
                v-model="chat.content"
              />
            </div>
            <div
              class="aui-text-f aui-text-center send-btn"
              @click="fnSendChat"
            >
              发送
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Record from "../../service/record.js";
export default {
  data() {
    return {
      id: "",
      chat: {},
      chatList: [],
      good: {}, //状态:1=待审核申请,2=待填订单号,3=待审核订单,4=通过的订单,5=已确认收货,6=已完成,7=不允许参加,8=过期未做单,9=订单号无效
    };
  },
  mounted() {
    this.id = this.$route.params.order_id;
    this.chat = {
      content: "",
      image: "",
      uid: this.$store.state.uid,
      order_id: this.id,
    };
    this.init();
  },
  methods: {
    init: function () {
      Record.fnGetChat({ order_id: this.id, isToken: true }).then((data) => {
        if (data && data.status) {
          this.good = data.order;
          this.chatList = data.chatlog;
        }
      });
    },
    fnSendChat() {
      let {content, order_id, uid, image} = this.chat;
      if (!!content || !!image) {
          // api
        let param = new FormData(); // 创建form对象
        
        let _param = {
          order_id: order_id,
          uid: uid,
          content: content,
          image: image
        };
        for (var i in _param) {
          param.append(i, _param[i]); // 添加form表单中其他数据
        }
        Record.fnSendChat(param).then((data) => {
          console.log(data);
          if (data && data.status) {
            this.chat.content = "";
            this.chat.image = '';
            this.init();
            window.scrollTo(0,0)
          }
        });
      } else {
          this.utils.fnMsg("请输入文字或选择图片");
            return false;
      }
    },
    // 预览图片
    fnPreview: function (path) {
      var arr = [];
      if (Array.isArray(path)) {
        arr = path;
      } else {
        arr = [path];
      }
      this.utils.fnPreviewPic(arr);
    },



    afterRead(file) {
      //判断图片的大小，单位是字节
      if (file.file.size > 2 * 1024 * 1024) {
        let vm = this;
        this.utils.fnChangeFile(file, { w: 200, h: 300 }, function (res) {
          this.chat.image = res.file;
          this.fnSendChat()
        });
      } else {
        // 符合大小的，直接上传
        this.chat.image = file.file;
        this.fnSendChat()
      }
    }
  },
};
</script>

<style scoped>
.contact_merchant {
  position: fixed;
  top: 30%;
  right: 0;
  padding: 5px 2px;
  border: 1px solid var(--pink);
  border-right: 0;
  border-radius: 4px 0 0 4px;
  color: var(--pink);
  width: 22px;
  text-align: center;
  font-size: 13px;
  background: #fff;
}
.contact_merchant .num {
  width: 18px;
  height: 18px;
  line-height: 18px;
  background: var(--pink);
  color: #fff;
  margin: -18px 0 0 4px;
  display: block;
  border-radius: 50%;
  font-size: 12px;
}

.comment {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 5px 6px;
}
.comment-input {
  flex: 1;
  padding: 0 15px;
}

.comment-input input {
  background-color: #f5f5f5;
  height: 28px;
  border-radius: 4px;
  border: 0;
  padding: 4px 5px;
  font-size: 13px;
}
.send-btn {
  background: var(--pink);
  color: #fff;
  font-size: 13px;
  border-radius: 15px;
  padding: 4px 15px;
}

.chat-list .list {
  display: flex;
  flex-direction: row;
}
.chat-list .list img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.chat-list .list .list-cont {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  border-bottom: 1px solid #eee;
}


.sy_detail .good_t {
  padding: 10px;
}
.sy_detail .good_t .good-img {
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding-bottom: 100%;
  /* 关键就在这里 */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.sy_detail .good_t .good_cont .name {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
.sy_detail .good_t .good_cont .name img {
  width: 18px !important;
  height: 18px !important;
}
.sy_detail .good_t .sq_btn {
  width: 100px;
  height: 25px;
  line-height: 25px;
  border-radius: 20px;
  border: 1px solid #777;
}
.sy_detail .good_t .passed {
  border-color: var(--pink) !important;
}
.sy_detail .no_sk {
  padding: 30px 15px;
}
.sy_detail .sk_pass .item .change_btn {
  padding: 3px 5px;
  border-radius: 3px;
  background-color: #ff9933;
}
.sy_detail .img-list {
  width: 90px !important;
  height: 120px !important;
}
.sy_detail .img-list .img {
  width: 90px !important;
  height: 120px !important;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.sy_detail .img-list {
  margin-right: 5px;
}
.sy_detail .pj .input {
  height: 40px;
  line-height: 40px;
  border-radius: 4px;
  padding-left: 10px;
  border: 1px solid var(--pink);
}
.sy_detail .pj .input input {
  height: 34px;
  line-height: 40px;
  border: 0;
  background-color: transparent !important;
  max-width: 95% !important;
}
.sy_detail .pj .input .btn {
  height: 40px;
  line-height: 40px;
  border-radius: 0 4px 4px 0;
}
.sy_detail table td {
  display: block;
  width: 400px !important;
  overflow-x: hidden;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word !important;
  min-height: 100px;
}
.sy_detail .tag_cont {
  overflow-x: hidden;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word !important;
}
.fixed {
  z-index: 1100;
}
.fixed .content {
  height: 50px;
  line-height: 50px;
}
.fixed .content .btn {
  height: 50px;
  line-height: 50px;
  border-radius: 0;
}
.fixed .content .lt {
  background-color: #444;
  padding-left: 20px;
}
.fixed .content .time_btn {
  background-color: #000;
}

.van-popup--center {
  right: 20px !important;
  left: 20px !important;
  border-radius: 4px !important;
  margin: auto;
  -webkit-transform: translateY(-50%) !important;
  -moz-transform: translateY(-50%) !important;
  -ms-transform: translateY(-50%) !important;
  -o-transform: translateY(-50%) !important;
  transform: translateY(-50%) !important;
}
</style>
